<template>
    <el-dialog title="费用配置" :visible.sync="dialogVisible" :width='type == 1 ? "35%":"20%"' :before-close="handleClose">
        <el-form :model="ruleForm" ref="ruleForm" label-width="auto">
            <c-form-template lable="费用" :actionText='type == 2?"添加自定义费用":""' @handleAction="addFee">
                <div v-for="(item,index) in feeList" :key="index" style="width:100%">
                    <el-col :span="type == 1 ? 14 : 24" v-if="item.label !=''">
                        <el-form-item :label="item.label">
                            <c-number-input v-model="ruleForm.sellerBillVO[index][item.key]" placeholder="请输入">
                                <template slot="append"> 元{{type == 1?"/台":""}} </template>
                            </c-number-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="10" class="mb-lg" v-if="type == 1">
                        <el-form-item :label='item.label+"总计："'>
                            {{ruleForm.sellerBillVO[index][item.key] * num}}元（{{num}}台）
                        </el-form-item>
                    </el-col>
                </div>
            </c-form-template>
            <c-form-template lable="自定义费用" v-if="isCustom">
                <div v-for="(item,index) in feeList" :key="index">
                    <el-col :span="24" v-if='item.label == ""'>
                        <el-form-item label="自定义费用名称">
                            <el-input v-model="ruleForm.sellerBillVO[index][item.title]" placeholder="请输入">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24" v-if='item.label == ""'>
                        <el-form-item label="费用金额">
                            <c-number-input v-model="ruleForm.sellerBillVO[index][item.key]" placeholder="请输入">
                                <template slot="append"> 元</template>
                            </c-number-input>
                        </el-form-item>
                    </el-col>
                </div>
            </c-form-template>
        </el-form>
        <span slot="footer">
            <el-button :loading="loading" @click="handleClose">取 消</el-button>
            <el-button :loading="loading" type="primary" @click="handleSubmit">确 定</el-button>
        </span>
    </el-dialog>
</template>
<script>
export default {
    data () {
        return {
            dialogVisible: false,
            loading: false,
            feeList: [],
            ruleForm: {
                id: "",
                sellerBillVO: [],
            },
            rules: {},
            num: 0,
            type: 0,
            isCustom: false
        };
    },
    mounted () {

    },
    methods: {
        addFee () {
            this.isCustom = true
            this.feeList.push(
                {
                    key: "amount",
                    label: "",
                    title: "details"

                }
            )
            this.ruleForm.sellerBillVO.push({
                amount: "",
                type: 11,
                details: ""
            })
        },
        getTypeList () {
            let url = '/ShopServiceFee/getList';
            this.ruleForm.sellerBillVO = []
            this.feeList = []
            this.$get({ url }).then((res) => {
                res.forEach((item) => {
                    this.feeList.push({
                        key: "amount",
                        label: item.name,
                        fee: item.fee
                    })
                    let feeType = {
                        1: 5, // 上牌费
                        2: 4, // 检测费
                    }[item.type];
                    this.ruleForm.sellerBillVO.push({
                        amount: item.fee,
                        type: feeType
                    })
                })
            });
        },
        handleSubmit () {
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    this.$confirm("是否确认此操作?", "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning",
                    }).then(() => {
                        this.loading = true;
                        const data = JSON.parse(JSON.stringify(this.ruleForm));
                        this.$post({
                            url: "/sellerBill/addOutBill",
                            data,
                        }).then(
                            () => {
                                this.$message.success("费用添加成功");
                                this.handleClose();
                                this.$parent.$parent.tableList();
                                this.loading = false;
                            },
                            () => {
                                this.loading = false;
                            }
                        );
                    });
                }
            });
        },
        handleOpen (item, type) {
            if (item && item.id) {
                this.ruleForm.id = item.id;
                this.type = type

                switch (type) {
                    case 1:
                        let vins = item.vins.split(",");
                        this.num = vins.length;
                        this.getTypeList();
                        break;
                    case 2:
                        this.ruleForm.sellerBillVO = []
                        this.feeList = []
                        this.feeList.push(
                            {
                                key: "amount",
                                label: "出口报关费",
                            },
                            {
                                key: "amount",
                                label: "车辆装箱费",
                            }
                        )
                        this.ruleForm.sellerBillVO.push({
                            amount: "",
                            type: 6
                        }, {
                            amount: "",
                            type: 7
                        },)
                        break;
                }

            }
            this.dialogVisible = true;
            this.loading = false;
        },
        handleClose () {

            this.dialogVisible = false;
        },
    },
};
</script>
